<template>
  <div class="allocate-detail-page">
    <!-- 调拨单基本信息 -->
    <el-descriptions title="调拨物品详情" class="desc-card">
      <!-- 关键：用 el-descriptions-item 包裹按钮，span="3" 表示占3列（与下方3个描述项列数匹配） -->
      <el-descriptions-item label="" span="3">
        <div class="button-example">
          <div class="button-row">
            <el-button type="success" @click="shenhe">审核</el-button>
            <el-button type="success" @click="shenhechakan">审核查看</el-button>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="调出仓库:">{{ order.outName }}</el-descriptions-item>
      <el-descriptions-item label="调入仓库:">{{ order.inName }}</el-descriptions-item>
      <el-descriptions-item label="调拨日期:">
        {{ order.transferDate }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 调拨物品列表 -->
    <el-table :data="tableData" class="goods-table">
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column prop="code" label="物品编码" width="140" />
      <el-table-column prop="availableStock" label="可用库存" width="120" />
      <el-table-column prop="applyNum" label="申请数量" width="120" />
      <el-table-column prop="auditNum" label="审批数量" width="120" />
      <el-table-column prop="outNum" label="已出库数量" width="120" />
      <el-table-column prop="box" label="周转筐" width="120" />
      <el-table-column prop="unit" label="计量单位" width="120" />
      <el-table-column prop="price" label="单价" width="100" />
      <el-table-column label="图片" width="120">
        <template #default="{ row }">
          <!-- 判断 row.picurl 是否有值，有值则渲染图片，无则显示空 -->
          <img
            v-if="row.picurl"
            :src="row.picurl"
            style="max-width: 100px; max-height: 80px; object-fit: cover"
            alt="物品图片"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
// 原逻辑保持不变
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { queryallocateDetail } from "@/api/allocate/allocate.js";

const tableData = ref([]);
const route = useRoute();
const order = ref({
  id: route.query.id || "",
  inName: route.query.inName || "",
  outName: route.query.outName || "",
  transferDate: route.query.transferDate || "",
});

async function init() {
  let params = {
    code: "",
    name: "",
    orderId: order.value.id,
    page: 1,
    pageSize: 10,
    unit: "",
  };
  console.log("查询参数:", params);
  let res = await queryallocateDetail(params);
  console.log("接口返回：", res);
  if (res.code == 200) {
    tableData.value = res.data.list;
    console.log("管理员数据:", JSON.parse(JSON.stringify(tableData.value)));
  }
}

onMounted(() => {
  init();
});


//跳转审核
const router = useRouter();
const shenhe = () => {
  router.push({
    path: "/allocateAudit",
    query: { 
      id: order.value.id,
      inName: order.value.inName,
      outName: order.value.outName,
      transferDate: order.value.transferDate,
    },
  });
};

//跳转审核查看
const shenhechakan = () => {
  router.push({
    path: "/allocateAuditQuery",
    query: { 
      id: order.value.id,
      inName: order.value.inName,
      outName: order.value.outName,
      transferDate: order.value.transferDate,
    },
  });
};
</script>

<style scoped>
/* 页面整体容器 */
.allocate-detail-page {
  padding: 20px;
  background-color: #f9fafc;
}

/* 描述信息卡片样式 */
.desc-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

/* 描述项间距优化 */
.desc-card >>> .el-descriptions__item {
  padding: 12px 20px;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

/* 表格样式优化 */
.goods-table {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 表头样式 */
.goods-table >>> .el-table__header th {
  background-color: #f5f7fa;
  color: #666;
  font-weight: 500;
  border-bottom: 1px solid #ebeef5;
}

/* 表格行 hover 效果 */
.goods-table >>> .el-table__body tr:hover {
  background-color: #f9fafc;
}

/* 单元格内边距调整 */
.goods-table >>> .el-table__cell {
  padding: 10px 8px;
  border-bottom: 1px solid #ebeef5;
  color: #555;
}

/* 响应式适配，小屏幕下表格可滚动 */
@media (max-width: 1200px) {
  .goods-table {
    overflow-x: auto;
  }
}

.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>
